import React, { Component, Suspense } from 'react'
// import Home from '../../pages/Home'
// import { Button, Select } from 'antd'
import { Route, Switch, Redirect } from 'react-router'

const About = React.lazy(() => import('../../pages/About'))
const Home = React.lazy(() => import('../../pages/Home'))
// const { Option } = Select
export default class Body extends Component {
  state = { count: 0 }
  selectNumber = 1

  add = () => {
    this.setState(this.addState, this.outputState)
    console.log(this.state)
  }

  outputState = () => {
    console.log('回调', this.state)
  }

  // 函数要返回一个对象
  addState = (state, props) => {
    console.log('setState调用：', state, props)
    return {
      count: state.count + this.selectNumber
    }
  }

  selectChange = (value) => {
    this.selectNumber = value
  }

  render() {
    return (
      <div>
        {/* 加了Switch，如果匹配到一个对应的path，就不会再往下匹配了，不加switch的就会一直往下匹配。 */}
        <Suspense fallback={<h1>Loading</h1>}>
          <Switch>
            {/* 精准匹配,如果东西都是好好的，不建议开启严格匹配 */}
            <Route exact path="/about" component={About} />
            {/* 模糊匹配 */}
            <Route path="/home" component={Home} />
            {/* 都没匹配到则执行这个to，类似于switch case的default */}
            <Redirect to="/about" />
          </Switch>
        </Suspense>

        {/* Count:当前求和为：{this.state.count}
        <br />
        <Select
          showSearch
          style={{ width: 200 }}
          placeholder="选择加多少个"
          onChange={this.selectChange}
          optionFilterProp="children"
          defaultValue={this.selectNumber}
          filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
        >
          <Option value="1">1</Option>
          <Option value="2">2</Option>
          <Option value="3">3</Option>
        </Select>
        <Button onClick={this.add}>+</Button> */}
      </div>
    )
  }
}
